import 'package:flutter/material.dart';
import '../../api/list_number.dart';
import '../../definitions/color.dart';
import '../../definitions/system_aud.dart';
import '../../model/number.dart';
import '../../widgets/choice_question_practice.dart';
import '../../wrappers/safe-area.dart';

class NumberPracticePage extends StatefulWidget {
  const NumberPracticePage({super.key});

  @override
  State<NumberPracticePage> createState() => _NumberPracticePageState();
}

class _NumberPracticePageState extends State<NumberPracticePage> {
  List<NumberInfo> numberList = [];

  void loadData() {
    listNumber().then((res) {
      setState(() {
        numberList = res;
      });
    });
  }

  @override
  void initState() {
    super.initState();
    loadData();
  }

  @override
  Widget build(BuildContext context) {
    return SafeAreaPageWrapper(
        padding: EdgeInsets.all(12),
        child: numberList.isEmpty
            ? Center(
                child: Text('数据加载中'),
              )
            : ChoiceQuestionPractice<NumberInfo>(
                totalOptions: numberList,
                tip: Text(
                  '请选出你听到的数字',
                  style: TextStyle(fontSize: 22),
                ),
                tipAud: SystemAud.numberPracticeQuestion.value,
                renderQuestion: (NumberInfo answer, List<NumberInfo> options,
                    bool hasFocus) {
                  return Text(
                    '请选择 ${answer.value}',
                    style: TextStyle(
                        color: hasFocus ? SchemeColor.seedColor.value : null,
                        fontSize: 22),
                  );
                },
                renderOption: (NumberInfo option, bool hasFocus) {
                  return Container(
                    alignment: Alignment.center,
                    child: Text(
                      '${option.value}',
                      style: TextStyle(
                        fontSize: 128,
                        color: hasFocus ? SchemeColor.seedColor.value : null,
                      ),
                    ),
                  );
                },
                getQuestionAud: (NumberInfo answer, List<NumberInfo> options) {
                  return answer.aud;
                },
              ));
  }
}
